/**
 * create by young (young2f@outlook.com) on 2020/8/18
 */

'use strict';
import React, {Component} from 'react';
import {Button, Form, Input, notification, Select, Switch} from 'antd';
import moment from 'moment';
import 'moment/locale/zh-cn';
import {FormField, FormLayout, ModalFooter} from 'antd-extra';
import TextArea from 'antd/es/input/TextArea';
import notify from '../../NotificationExtra';

const {Option} = Select;
const _ = require('lodash');
moment.locale('zh-cn');

@Form.create()
class ModalEditDLabel extends Component {
  constructor(props) {
    super(props);
    this.state = {data: undefined};
  }

  componentDidMount() {

  }

  selectChange = item => {
    this.state.data.inputType = item;
  };
  labelInfo = () => {
    const {form} = this.props;
    const {data} = this.state;

    let {required, label, key, type, selectOption, inputType, defaultValue, enableArea = 'table'} = data;
    let showSelectOption = false, showDefaultValue = true;
    let defaultValueView = <Input defaultValue={defaultValue} style={{width: '60%'}}></Input>;
    let showDataType = true;
    if (inputType === 'Switch') {
      defaultValueView = <Switch
        checkedChildren="是" unCheckedChildren="否"
        defaultChecked={defaultValue}
      ></Switch>;
      showSelectOption = false;
      showDataType = false;
      showDefaultValue = true;
    }
    if (inputType === 'Select') {
      showSelectOption = true;
      showDataType = false;
      showDefaultValue = true;
      let str = '';
      selectOption && selectOption.forEach(item => {
        str += item.label + ':' + item.value + '\n';
      });
      selectOption = str;
    }
    if (inputType === 'Date') {
      showSelectOption = false;
      showDataType = false;
      showDefaultValue = false;
    }
    // if (inputType === 'Memo') {
    //   showSelectOption = false;
    //   showDataType = false;
    // }
    return (<Form>
      <FormLayout form={form} cols={1}>
        <FormField
          label={'是否必填项'}
          name={'required'}
          initialValue={required}
        >
          <Switch
            checkedChildren="是" unCheckedChildren="否"
            defaultChecked={required}></Switch>
        </FormField>
        <FormField
          label={'配置值名称'}
          name={'label'}
          initialValue={label}
          required
        >
          <Input style={{width: '60%'}}/>
        </FormField>
        <FormField
          label={'配置值数据字段'}
          name={'key'}
          required
          initialValue={key}
        >
          <Input style={{width: '60%'}}></Input>
        </FormField>

        <FormField
          label={'录入方式'}
          name={'inputType'}
          required
          initialValue={inputType}
        >
          <Select style={{width: '60%'}} onChange={this.selectChange}>
            <Option value={'Input'}>录入</Option>
            <Option value={'Select'}>选择</Option>
            <Option value={'Switch'}>开关</Option>
            <Option value={'Date'}>日期</Option>
            {/*<Option value={'Memo'}>备注</Option>*/}
          </Select>
        </FormField>
        {showDataType && <FormField
          label={'录入数据类型'}
          name={'type'}
          required
          initialValue={type}
        >
          <Select style={{width: '60%'}}>
            <Option value={'String'}>字符串</Option>
            <Option value={'Number'}>数字</Option>
            <Option value={'Char'}>字母</Option>
            <Option value={'NumberAndChar'}>数字加字母</Option>
            <Option value={'Any'}>不限</Option>
          </Select>
        </FormField>}
        {showSelectOption && <FormField
          label={'选择项'}
          name={'selectOption'}
          required
          initialValue={selectOption}
        >
          <TextArea style={{width: 720}} rows={10} placeholder="以换行分隔"></TextArea>
        </FormField>}
        {showSelectOption && <FormField
          label={'示例'}
          name={'exm'}
          required
          initialValue={'显示字段:数据字段'}
        >
          <div>显示字段 : 数据字段</div>
        </FormField>}
        {showDefaultValue && <FormField
          label={'配置值默认值'}
          name={'defaultValue'}
          initialValue={defaultValue}
        >
          {defaultValueView}
        </FormField>}
        {<FormField
          label={'字段显示区域'}
          name={'enableArea'}
          required
          initialValue={enableArea}
        >
          <Select style={{width: '60%'}} mode={'multiple'}>
            <Option value={'table'}>表格</Option>
            <Option value={'detail'}>详情页</Option>
            {/*<Option value={'search'}>搜索框</Option>*/}
          </Select>
        </FormField>}
      </FormLayout>
    </Form>);
  };
  renderFoot = () => {
    const {foot, value, modalRef} = this.props;
    if (foot) {
      return foot(value, modalRef);
    } else {
      return (
        <ModalFooter>
          <Button type="primary" onClick={() => {
            const {result} = this.props;

            this.props.form.validateFields((err, values) => {
              if (err) {
                const {code} = err;
                const {errors} = code;
                errors.forEach(item => {
                  notification.error(item);
                });
                return;
              }

              const {labels} = this.props;

              const key = this.props.form.getFieldValue('key');
              if (labels && labels.length) {
                const temp = labels.filter(item => item.key === key);
                if (temp && temp.length) {
                  notify({type: 'error', message: `数据字段：${key} 已存在`});
                  return;
                }
              }

              const {defaultValue, inputType, selectOption, enableArea} = values;
              enableArea.push('input')
              if (inputType === 'Switch' && !defaultValue) {
                values.defaultValue = false;
              }

              if (inputType === 'Select') {
                const array = selectOption.split('\n');
                const list = [];
                array.forEach(item => {
                  const arr = item.split(':');
                  if (arr.length === 2) {
                    const json = {label: arr[0], value: arr[1]};
                    list.push(json);
                  }
                });

                values.selectOption = list;
              }
              const {data} = this.state;
              console.log('dataa', data);
              _.assign(data, values);
              result && result(data);
              modalRef.close();
            });
          }}>确定</Button>
          <Button onClick={() => {
            modalRef.close();
          }}>取消</Button>
        </ModalFooter>
      );
    }
  };

  render() {
    const {data = {required: true, label: '', key: '', type: 'Input'}} = this.props;
    this.state.data = data;
    return (
      <div>
        {this.labelInfo()}
        {this.renderFoot()}
      </div>
    );
  }
}

export default ModalEditDLabel;
